<template>
    <ElDialog :close-on-click-modal="false" class="dialog" v-model="visible" :title="title" :width="400">
        <ElSpace>
            <ElIcon color="orange" size="20px">
                <QuestionFilled />
            </ElIcon>
            {{ content }}
        </ElSpace>
        <template #footer>
            <ElButton @click="visible = false">取消</ElButton>
            <ElButton type="primary" :loading="loading" @click="clickOk">确定</ElButton>
        </template>
    </ElDialog>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, watch } from "vue";
import { QuestionFilled } from '@element-plus/icons-vue';
const app = getCurrentInstance();

/**
 * 是否显示
 */
const visible = ref(true);
/**
 * loading
 */
const loading = ref(false);

const { cancel, ok } = defineProps({
    /**
     * 标题
     */
    title: {
        type: String,
        default: '询问'
    },
    /**
     * 内容
     */
    content: {
        type: String,
        default: true
    },
    /**
     * 取消
     */
    cancel: {
        type: Function,
        required: true
    },
    ok: {
        type: Function,
        required: true
    }
});

/**
 * 点击确定按钮
 */
const clickOk = () => {
    loading.value = true;
    ok();
}

watch(visible, v => {
    !v && cancel();
    !v && setTimeout(() => {
        const parent = app?.proxy?.$el.parentNode;
        app?.appContext.app.unmount();
        parent.remove();
    }, 500);
});
</script>

<style lang="scss">
.dialog {
    border-radius: 3px;

    .el-dialog__header {
        padding: 10px 20px !important;

        .el-dialog__headerbtn {
            top: -5px;
        }
    }

    .el-dialog__body {
        padding: 5px 20px;
    }

    .el-dialog__footer {
        padding: 10px 15px;
    }
}
</style>